import React, { Component, createRef } from 'react'
// 引入上下问
import myContext from './context'
// 引入组件
import One from "./pages/One"
import Tow from "./pages/Tow"
export default class App extends Component {

  state = {
    count: 1,
    num: "",
    isisisi: 55555
  }
  T = createRef()
  // this.setState在对象的情况下是同步的不会合并，在回调的情况下是异步的，会合并所有的setState
  add = () => {
    // for (var i = 0; i < 3; i++) {
    //   this.setState((state) => {
    //     return {
    //       count: state.count + 2
    //     }
    //   }, () => {
    //     console.log(this.state.count, "新值")
    //   })
    //   this.setState((state) => {
    //     return {
    //       count: state.count + 2
    //     }
    //   }, () => {
    //     console.log(this.state.count, "新值")
    //   })
    //   this.setState((state) => {
    //     return {
    //       count: state.count + 2
    //     }
    //   }, () => {
    //     console.log(this.state.count, "新值")
    //   })
    // }
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 2
    })
    console.log(this.state.count, "值")
    console.log(1, "测试")
  }
  getOneNum = (n) => {
    console.log(n)
    this.setState({
      num: n
    })
  }
  editNum = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
  addContext = () => {
    this.setState({
      isisisi: this.state.isisisi + 1
    })
  }
  // isDispaly = () => {
  //   this.T.TowIsShow()
  // }
  render() {
    let { count, num, isisisi } = this.state
    let { add, getOneNum, editNum, isDispaly, addContext } = this
    return (
      <div>
        <h1>App</h1>
        <h1>count:{count}</h1>
        <button onClick={add}>+++++</button>
        <button onClick={addContext}>+context值</button>
        <hr></hr>
        <button onClick={editNum}>修改num</button>
        <myContext.Provider value={isisisi}>
          <One getOneNum={getOneNum}></One>
          <hr></hr>
          <Tow num={num}></Tow>
        </myContext.Provider>

      </div>
    )
  }
  getSnapshotBeforeUpdate() {

  }
  static getDerivedStateFromProps() {

  }
}
